<template>
  <header class="index-header">
      <div class="index-logo">
<img src="http://mstatic.pianor.com/images/logo.jpg?v=20171109"/>
      </div>
      
      <div class="index-search">
          <span class="iconfont c2">&#xe616;</span>
          <input type="text"placeholder="请输入关键字">
      </div>
      <span class="iconfont c1">&#xe8e6;</span>
  </header>
</template>

<script>
export default {

}
</script>

<style lang="less"scoped>
@import "../../assets/styles/comm.less";
.index-header{
    width: 750/@u;
    height: 60/@u;
    background: #36231d;
    display: flex;
    justify-content: space-around;
        .index-logo{
            width: 150/@u;
            padding-top: 10/@u;
            img{
                width: 100%;
            }
        }
        .index-search{
            width: 400/@u;
            height: 38/@u;
            background: #fff;
            margin-top: 10/@u;
            border-radius: 10/@u;
            line-height: 30/@u;
            span{
                padding-left: 15/@u;
            }
            input{
                border: none;
                padding-top: -10/@u;
                font-size: 25/@u;
            }
        }
        .c1{
            font-size: 50/@u;
            color: #fff;

        }
        .c2{
            font-size: 25/@u;
            
        }
        
}
</style>
